<template>
    <div class="container">
        <div class="login-form">
            <div class="left">
                <div class="tit">{{ titleName }}管理平台</div>
            </div>
            <div class="right">
                <div class="tit"><b>登录</b>WELCOME</div>
                <div class="tit2">欢迎登录{{ titleName }}管理平台</div>
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="top" size="small"
                         :hide-required-asterisk="true">
                    <el-form-item label="用户名" prop="username">
                        <el-input
                            ref="username"
                            v-model="loginForm.username"
                            placeholder="请输入用户名/手机号"
                            name="username"
                            type="text"
                            tabindex="1"
                            autocomplete="on"
                        />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                            :key="passwordType"
                            ref="password"
                            v-model="loginForm.password"
                            :type="passwordType"
                            placeholder="请输入密码"
                            name="password"
                            tabindex="2"
                            autocomplete="on"
                            @keyup.native="checkCapslock"
                            @blur="capsTooltip = false"
                            @keyup.enter.native="handleLogin"
                        />
                    </el-form-item>

<!--                    <el-form-item label="验证码" prop="code">-->
<!--                        <div style="display: flex;">-->
<!--                            <div style="flex: 1;">-->
<!--                                <el-input-->
<!--                                    v-model="loginForm.code"-->
<!--                                    placeholder="请输入图形验证码"-->
<!--                                    autocomplete="off"-->
<!--                                    @keyup.enter.native="handleLogin"-->
<!--                                />-->
<!--                            </div>-->
<!--                            <div style="width:90px; text-align: right;">-->
<!--                                <img :src="imageCode" style="width:80px; height:32px; cursor: pointer;"-->
<!--                                     @click="getKaptcha()"/>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </el-form-item>-->

                    <el-form-item style="padding-top:30px;">
                        <el-button type="primary" @click="handleLogin">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import {validUsername} from '@/utils/validate'
import SocialSign from './components/SocialSignin'
import settings from '@/settings'

export default {
    name: 'Login',
    components: {SocialSign},
    data() {
        const validateUsername = (rule, value, callback) => {
            if (!validUsername(value)) {
                callback(new Error('请输入正确的用户名'))
            } else {
                callback()
            }
        }
        const validatePassword = (rule, value, callback) => {
            if (value.length < 8) {
                callback(new Error('密码长不能小于8位'))
            } else {
                callback()
            }
        }

        // const validateCode = (rule, value, callback) => {
        //     if (value.length !== 4) {
        //         callback(new Error('验证码长度为4位'))
        //     } else {
        //         callback()
        //     }
        // }

        return {
            loginForm: {
                username: '',
                password: '',
                // code: '',
                // imageCodeToken: ''
            },
            loginRules: {
                username: [{required: true, trigger: 'blur', validator: validateUsername}],
                password: [{required: true, trigger: 'blur', validator: validatePassword}],
                // code: [{required: true, trigger: 'blur', validator: validateCode}]
            },
            passwordType: 'password',
            capsTooltip: false,
            loading: false,
            showDialog: false,
            redirect: undefined,
            otherQuery: {},
            titleName: settings.title,
            // imageCode: ''
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                const query = route.query
                if (query) {
                    this.redirect = query.redirect
                    this.otherQuery = this.getOtherQuery(query)
                }
            },
            immediate: true
        }
    },
    created() {
        // window.addEventListener('storage', this.afterQRScan)
        // this.getKaptcha()
    },
    mounted() {
        if (this.loginForm.username === '') {
            this.$refs.username.focus()
        } else if (this.loginForm.password === '') {
            this.$refs.password.focus()
        }
    },
    destroyed() {
        // window.removeEventListener('storage', this.afterQRScan)
    },
    methods: {
        checkCapslock(e) {
            const {key} = e
            this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
        },
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    this.$store.dispatch('user/login', this.loginForm)
                        .then(() => {
                            this.$router.push({path: this.redirect || '/', query: this.otherQuery})
                            this.loading = false
                        })
                        .catch(() => {
                            // this.loginForm.code=''
                            // this.getKaptcha()
                            this.loading = false
                        })
                } else {
                    return false
                }
            })
        },
        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {})
        },
        // getKaptcha() {
        //     AdminApi.getKaptcha().then((response) => {
        //         this.loginForm.imageCodeToken = response.imageCodeToken
        //         this.imageCode = response.base64Img
        //
        //     })
        // }

    }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    background: url("../../../public/image/login_bg.jpg");
    background-position: top center;
}

.login-form {
    width: 1080px;
    height: 560px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -280px 0 0 -540px;
    background: #FFF;
    display: inline-flex;
}

.login-form .left {
    width: 631px;
    padding: 56px 0 0 40px;
    background: url("../../../public/image/login_input.jpg") left top no-repeat;
}

.login-form .left .tit {
    font-size: 26px;
    color: #F8FEFF;
    font-weight: bold;
    letter-spacing: 8px;
}

.login-form .left .eng {
    font-size: 12px;
    color: #F8FEFF;
    margin-top: 10px;
}

.login-form .right {
    width: 449px;
    padding: 70px 50px;
}

.login-form .right .tit {
    font-size: 12px;
}

.login-form .right .tit b {
    font-size: 30px;
    color: #333;
    padding-right: 10px;
}

.login-form .right .tit2 {
    font-size: 12px;
    color: #999;
}

.el-form {
    margin-top: 60px;
}

.el-form--label-top .el-form-item__label {
    padding-bottom: 0px !important;
}

.el-input--small .el-input__inner {
    border-width: 0 0 1px 0;
    border-radius: 0px;
    padding-left: 0px !important;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s;
    -webkit-text-fill-color: #333 !important;
}
</style>
